<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3_新增2D变换原点</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            border: 1px solid red;
        }
        .div1{
            /*transform: translate(50%,50%) rotate(20deg);*/
            /*transform-origin: left top;*/
            /*transform-origin: 50px 50px;*/
        }
    </style>
</head>
<body>
<!--
    变换原点：
        1，元素变换时，默认的原点是元素中心点。使用transform-origin属性可以改变变换的原点。
        2，修改变换原点对位移没有影响，对旋转和缩放会产生影响。
        3.如果提供两个值，第一个用于横坐标，第二个用于纵坐标。
        4.如果提供一个值，若是像素值，表示横坐标，纵坐标取50%;若是关键词，则另一个坐标取50%。
            1.transform-origin: 50% 50%,变换原点在元素中心，百分比是相对自身。 --默认值
            2.transform-origin: left top,变换原点在左上角
            3.transform-origin: 50px 50px,变换原点距离元素坐左上角50px,50px的位置。
            4.transform-origin:0,只写一个值的时候，第二个值默认为50%。
-->
    <div class="div1">1</div>

</body>
</html>